<template>
    <div>
        <el-tag>
            <i class="el-icon-delete"></i>
            <span>练习 - 练习01</span>
        </el-tag>
        <div>
            <p>表格</p>
            <!--搜索框-->
            <div class="seacher">
                <el-select v-model='searchOption.model' placeholder="请选择" class="os">
                    <el-option v-for="item in searchOption.options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-date-picker v-model="searchOption.startDate" type='date' placeholder='选择开始日期'>
                </el-date-picker>
                <el-date-picker v-model="searchOption.endDate" type='date' placeholder='选择结束日期' :picker-options="searchOption.pickerOptions">
                </el-date-picker>
                <el-input v-model="searchOption.key" placeholder="输入搜索条件" class="key">
                </el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button>
                <el-button type="primary" icon="delete" @click="clearSearch">清除</el-button>
            </div>
            <div>
                <!--表格-->
                <el-table :data="tabledata" border stripe style="width:100%" @expand="handleExpand" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>

                    <!--展开行-->
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="方法">
                                    <span>{{ props.row.method }}</span>
                                </el-form-item>
                            </el-form>
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="ip地址">
                                    <span>{{ props.row.host }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>

                    <el-table-column label="系统" width="100">
                        <template slot-scope="scope">
                            <el-popover trigger="click" placement="top">
                                <p>方法: {{ scope.row.method }}</p>
                                <p>ip: {{ scope.row.host }}</p>
                                <div slot="reference" class="name-wrapper">
                                    <el-tag>{{ scope.row.from }}</el-tag>
                                </div>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="host" label="ip地址" width="150">
                    </el-table-column>
                    <el-table-column prop="method" label="方法" width="160">
                    </el-table-column>
                    <el-table-column prop="createTime" label="时间" width="180">
                    </el-table-column>
                    <el-table-column prop="version" label="版本" width="80">
                    </el-table-column>
                    <el-table-column prop="userId" label="用户id" width="80">
                    </el-table-column>
                    <el-table-column prop="resultCode" label="结果" width="80">
                    </el-table-column>
                    <el-table-column prop="timeConsume" label="耗时(毫秒)" width="120">
                    </el-table-column>
                    <el-table-column prop="deviceId" label="设备编号" width="350">
                    </el-table-column>
                    <el-table-column prop="token" label="token" width="350">
                    </el-table-column>

                    <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleLook(scope.$index,scope.row)" size="small">查看</el-button>
                            <el-button type="text" @click="handleEdit(scope.$index,scope.row)" size="small">修改</el-button>
                            <el-button type="text" @click="handleDelete(scope.$index,scope.row)" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页-->
                <div style="margin-top:10px;">
                    <el-pagination class="my-el-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="rowCount">
                    </el-pagination>
                </div>
                <!--操作按钮-->
                <div>
                    <el-button type="primary" icon="delete" @click="deleteAll" :disabled="deleteType">批量删除</el-button>
                    <el-button type="success" icon="d-arrow-right" @click='otherPage'>另一个页面</el-button>
                </div>
                <el-dialog title="修改内容" :visible.sync="dialogFormVisible">
                    <el-form :model="form" :rules="rules">
                        <el-form-item label='ip地址' :label-width="formLabelWidth">
                            <el-input v-model="form.host" disabled></el-input>
                        </el-form-item>
                        <el-form-item label='方法' :label-width="formLabelWidth">
                            <el-input v-model="form.method" disabled></el-input>
                        </el-form-item>
                        <el-form-item label='系统' :label-width="formLabelWidth" prop="from">
                            <el-select v-model="form.from" placeholder="请选择系统" style="width:100%">
                                <el-option label="安卓" value="android"></el-option>
                                <el-option label="苹果" value="ios"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label='版本' :label-width="formLabelWidth" prop="version">
                            <el-input v-model="form.version"></el-input>
                        </el-form-item>
                        <el-form-item label='用户id' :label-width="formLabelWidth" prop="userId">
                            <el-input-number v-model="form.userId" style="width:100%"></el-input-number>
                        </el-form-item>
                        <el-form-item label='耗时(毫秒)' :label-width="formLabelWidth">
                            <el-input v-model="form.timeConsume"></el-input>
                        </el-form-item>
                        <el-form-item label='结果' :label-width="formLabelWidth">
                            <el-input v-model="form.resultCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data: function() {
        return {
            tabledata: [],
            currentPage: 1,
            rowCount: 0,
            pageSize: 10,
            dialogFormVisible: false,
            formLabelWidth: '80px',
            form: {
                host: '',
                method: '',
                from: '',
                version: '',
                userId: '',
                timeConsume: '',
                resultCode: ''
            },
            rules: {
                from: [
                    //blur 失去焦点
                    { required: true, message: '请选择系统', trigger: 'change' }
                ],
                version: [
                    { required: true, message: '请输入版本名称', trigger: 'blur' },
                    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                userId: [
                    { required: true, message: '请输入用户id', type: 'number', trigger: 'blur' }
                ]
            },
            searchOption: {
                model: '',
                options: [
                    {
                        value: 'ios',
                        label: '苹果'
                    },
                    {
                        value: 'android',
                        label: '安卓'
                    }
                ],
                key: '',
                startDate: '',
                endDate: '',
                pickerOptions: {
                    // disabledDate: function(time){
                    //     return time.getTime() < this.startDate - 8.64e7;
                    // }
                    // disabledDate(time){
                    //     console.log(time);
                    //     console.log(this.searchOption.startDate)
                    // }   
                    // 只有使用lambda表达式,this才能引用到vue实例
                    disabledDate: (time) => {
                        if (this.searchOption.startDate) {
                            //开始时间不为空
                            //当日历中的时间小于开始时间时,不能被选择
                            return time.getTime() < this.searchOption.startDate.getTime();
                        } else {
                            console.log('没有选择开始时间');
                        }
                    }
                }
            },
            deleteType: true,
            multipleSelection: []
        };
    },
    methods: {
        handleSizeChange(val) {
            this.pageSize = val;
            this.getData();
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getData();
        },
        getData() {
            let url = 'http://localhost:10020/sys/access/listQuery';
            let params = {
                page: this.currentPage,
                rows: this.pageSize,
                key: ''
            }
            axios.get(url, {
                params: params
            })
                .then(response => {
                    if (response.data.code == 0) {
                        this.tabledata = response.data.data.data.map(item => {
                            return {
                                from: item.header.from,
                                host: item.header.host,
                                method: item.header.method,
                                version: item.header.version,
                                token: item.header.token,
                                deviceId: item.header.deviceId,
                                userId: item.header.userId,
                                timeConsume: item.timeConsume,
                                resultCode: item.resultCode,
                                createTime: this.formatDateTime(item.createTime)
                            }
                        });
                        this.currentPage = response.data.data.currentPage;
                        this.rowCount = response.data.data.rowCount;
                    }
                })
                .catch(error => {
                    console.log(error)
                })
        },
        formatDateTime(inputTime) {
            var date = new Date(inputTime);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            var h = date.getHours();
            h = h < 10 ? ('0' + h) : h;
            var minute = date.getMinutes();
            var second = date.getSeconds();
            minute = minute < 10 ? ('0' + minute) : minute;
            second = second < 10 ? ('0' + second) : second;
            return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;
        },
        handleLook(index, row) {
            console.log(index);
            console.log(row);
        },
        handleEdit(index, row) {

            this.form.host = row.host;
            this.form.method = row.method;
            this.form.from = row.from;
            this.form.version = row.version;
            this.form.userId = row.userId;
            this.form.timeConsume = row.timeConsume;
            this.form.resultCode = row.resultCode;
            this.dialogFormVisible = true;
        },
        handleDelete(index, row) {

        },
        search() {
            console.log("搜索条件");
            console.log(this.searchOption.model);
            console.log(this.searchOption.key);
            console.log(this.searchOption.startDate);
            console.log(this.searchOption.endDate);
        },
        clearSearch() {
            this.searchOption.model = '';
            this.searchOption.key = '';
            this.searchOption.startDate = '';
            this.searchOption.endDate = '';

        },
        select(selection, row) {
            console.log(selection)
            console.log(row)
        },
        deleteAll() {
            let temp = this.multipleSelection.map(item => {
                return {
                    system: item.from,
                    host: item.host,
                    method: item.method
                }
            })
            console.log(temp);
            let length = temp.length;
            this.$confirm(`是否删除这${length}条数据?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                // caozuo 
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消删除'
                });
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
            console.log(this.multipleSelection)
            if (this.multipleSelection.length == 0) {
                this.deleteType = true;
            } else {
                this.deleteType = false;
            }
        },

        /**
         * 在table上定义 @expand="handleExpand"
         * 会自动注入属性
         * row: 行数据
         * expanded: 点击后的展开状态
         */
        handleExpand(row, expanded) {
            console.log(expanded)
        },

        // 跳转到另一个页面
        otherPage() {
            this.$router.push('/demo02');
        }
    },
    mounted() {
        this.getData();
    }
}
</script>

<style scoped>
.my-el-pagination {
    text-align: right;
}

.seacher {
    margin-top: 10px;
    margin-bottom: 10px;
}

.seacher .select {
    width: 130px;
}

.seacher .key {
    width: 180px;
    margin-left: 5px;
    margin-right: 5px;
}
</style>



